<template>
  <div class="officialrank">
    <div class="rank-box-item">
      <div
        class="rank-item-top"
        :style="{
          background:
            'linear-gradient(to right,' + bgColor[0] + ',' + bgColor[1] + ')'
        }"
        @click="toPlaylistdetails"
      >
        <div class="left">
          <div class="left-item-Big">{{ title[0] }}</div>
          <div class="left-set">
            <div class="left-item">{{ title[1] }}</div>
            <div class="left-date" v-if="title[0] + title[1] !== '歌手榜'">
              {{ time | UpdateTime }}更新
            </div>
            <div class="left-date" v-else>
              {{ singerTime | UpdateTime }}更新
            </div>
          </div>
        </div>
        <div class="right">
          <i class="iconfont icon-bofang3"></i>
        </div>
      </div>
      <div class="rank-box-bottom">
        <div class="content" v-if="title[0] + title[1] !== '歌手榜'">
          <tr
            class="table"
            v-for="(item, index) in playlist"
            :key="index"
            :class="{ backColor: setBackColor(index) }"
          >
            <div class="rank">
              <div
                class="index-rank"
                :style="{ color: index <= 2 ? themeColor : '' }"
              >
                {{ index + 1 }}
              </div>
              <span class="musicname" @dblclick="playmusic(item)">
                {{ item.name }}
                <span class="alia" v-if="item.alia !== ''"
                  >({{ item.alia }})</span
                >
              </span>
            </div>
            <div class="name" @click="toSingerDetails(item.aliasId)">
              <span class="name1">{{ item.song }}</span
              >{{ item.song2 !== "" ? "/" : "" }}
              <span class="name2" v-if="item.song !== ''">{{
                item.song2
              }}</span>
            </div>
          </tr>
          <div class="openAll">
            <span @click="toPlaylistdetails"
              >查看全部<i class="el-icon-arrow-right"></i
            ></span>
          </div>
        </div>

        <!-- 歌手榜 -->
        <div class="content" v-if="singer.length !== 0">
          <tr
            class="table"
            v-for="(item, index) in singer"
            :key="index"
            :class="{ backColor: setBackColor(index) }"
          >
            <div class="rank">
              <div
                class="index-rank"
                :style="{ color: index <= 2 ? themeColor : '' }"
              >
                {{ index + 1 }}
              </div>
              <span class="musicname" @click="toSingerDetails(item.id)">
                {{ item.name }}
              </span>
            </div>
          </tr>
          <div class="openAll">
            <span @click="toSingerList"
              >查看全部<i class="el-icon-arrow-right"></i
            ></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getplaylistdetail } from "@/api/playlist.js";
import { rankSongDetail } from "@/utils/detail.js";
export default {
  name: "OfficialRank",
  components: {},
  props: {
    rankId: {
      type: Number,
      default() {
        return 0;
      }
    },
    title: {
      type: Array
    },
    bgColor: {
      type: Array
    },
    singer: {
      type: Array,
      default() {
        return [];
      }
    },
    singerTime: {
      type: Number
    }
  },
  data() {
    return {
      playlist: [], //音乐列表
      time: "", //时间,
      AllList: [] // 全部音乐
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    }
  },
  watch: {},
  created() {
    this.getplaylistdetail();
  },
  mounted() {},
  methods: {
    async getplaylistdetail() {
      const { data } = await getplaylistdetail({
        id: this.rankId
      });
      data.playlist.tracks.splice(0, 10).forEach(val => {
        let song = new rankSongDetail(val);
        this.playlist.push(song);
      });
      this.time = data.playlist.updateTime;
      data.playlist.tracks.forEach(val => {
        let song = new rankSongDetail(val);
        this.AllList.push(song);
      });
    },
    setBackColor(index) {
      if (index % 2 != 0) {
        return true;
      }
      return false;
    }, // 跳到歌单详情
    toPlaylistdetails() {
      if (this.title[0] + this.title[1] == "歌手榜") {
        this.$router.push({
          name: "singerlist"
        });
      } else {
        this.$router.push({
          name: "playlistdetails",
          query: {
            id: this.rankId
          }
        });
      }
    },
    playmusic(playinfo) {
      this.$store.commit("setplaylist", this.AllList);
      this.$store.commit("setContent", playinfo);
    },
    // 跳到歌手详情
    toSingerDetails(id) {
      this.$router.push({
        name: "singerdetails",
        query: {
          id
        }
      });
    },
    //跳到歌曲详情
    // toMusicDetails(id) {
    //   this.$router.push({
    //     name: "musicdetails",
    //     query: {
    //       id
    //     }
    //   });
    // },
    // 跳到歌手页面
    toSingerList() {
      this.$router.push({
        name: "singerlist"
      });
    }
  }
};
</script>

<style scoped lang="scss">
.rank-box-item {
  margin-right: 1.5625rem;
  margin-bottom: 3.125rem;
  width: 100%;
  padding: 0.625rem;
  // height: 25rem;;
  font-size: 1rem;
  cursor: pointer;
  .rank-item-top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-style: oblique;
    width: 100%;
    height: 7.14286rem;
    .left {
      color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      // padding: 0.625rem 0;
      height: 100%;
      box-sizing: border-box;
      .left-item-Big {
        font-size: 5rem;
        margin-right: 1.25rem;
        box-sizing: border-box;
      }
      .left-set {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // padding: 1.25rem 0;
        .left-item {
          font-size: 2.125rem;
        }
        .left-date {
          font-size: 1.125rem;
          margin-top: 1.25rem;
        }
      }
    }
    .right {
      .icon-bofang3 {
        font-size: 3.125rem;
        color: #fff;
      }
    }
  }
  .rank-box-bottom {
    .content {
      // padding: 0 0.625rem;
      color: #575757;
      .openAll {
        width: 100%;
        // text-align: center;
        padding: 0.625rem 0;
        color: #ccc;
        span {
          text-align: center;
        }
      }
      .table {
        padding: 0.3125rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .rank {
          display: flex;

          .index-rank {
            width: 1.25rem;
            margin-right: 0.3125rem;
            padding: 0.3125rem;
          }
          .musicname {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            padding: 0.3125rem;
            .alia {
              color: #cccccc;
              font-size: 0.75rem;
              // display: flex;
              // display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
        }
      }
      .name {
        margin-left: 1.25rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        padding: 0.3125rem;
      }
    }
  }
}
.rank-item-top1 {
  background: linear-gradient(to right, rgb(86, 161, 227), rgb(90, 139, 235));
}
.rank-item-top2 {
  background: linear-gradient(to right, rgb(52, 170, 190), rgb(86, 194, 205));
}
.rank-item-top3 {
  background: linear-gradient(to right, rgb(213, 61, 106), rgb(235, 99, 141));
}
.rank-item-top4 {
  background: linear-gradient(to right, rgb(199, 82, 60), rgb(204, 116, 85));
}
.backColor {
  background: #f9f9f9;
}
.table:hover {
  background-color: #ebeced;
}
.name1:hover {
  color: #222222;
}
.name2:hover {
  color: #222222;
}
.musicname:hover {
  color: #222222;
}
.openAll span:hover {
  color: #808080;
}
</style>
